<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>潜在客户管理</title>
    <link rel="stylesheet" href="../../css/common.css">
    <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
    <script src="../../layui/layui.js"></script>
    <link id="layuicss-layer" rel="stylesheet" href="../../layui/css/modules/layer/default/layer.css" media="all">
       <!-- <script src="../../js/jquery-1.9.1.min.js"></script> -->
</head>
<body>
    <!-- 添加功能弹出层div开始（隐藏） -->
    <div style="display: none;" id="saveDiv">
        <form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm" >
            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="name" required  lay-verify="required" placeholder="请输入员工名称" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="gender" required  lay-verify="required" placeholder="请输入性别" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="tel" required  lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">qq</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="role" required  lay-verify="required" placeholder="请输入员工qq" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">职业</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="job" required  lay-verify="required" placeholder="请输入员工职业" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">来源</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="source" required  lay-verify="required" placeholder="请输入员工来源" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">来源</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="source" required  lay-verify="required" placeholder="请输入员工来源" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="doSubmit1">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 添加功能弹出层div结束 -->

    <!-- 修改功能弹出层div开始（隐藏） -->
    <div style="display: none;" id="UpdateDiv">
        <form class="layui-form" action="" lay-filter="dataFrm" id="dataFrm" >
            <div class="layui-form-item">
                <label class="layui-form-label">id:</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="id" required disabled  lay-verify="required" placeholder="请输入id名称" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="name" required  lay-verify="required" placeholder="请输入员工名称" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">年龄</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="age" required  lay-verify="required" placeholder="请输入年龄" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="gender" required  lay-verify="required" placeholder="请输入性别" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">电话</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="tel" required  lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input">
                </div>
            </div>
    
            <div class="layui-form-item">
                <label class="layui-form-label">qq</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="qq" required  lay-verify="required" placeholder="请输入员工qq" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">职业</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="job" required  lay-verify="required" placeholder="请输入员工职业" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">来源</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="source" required  lay-verify="required" placeholder="请输入员工来源" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="doSubmit2">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 修改功能弹出层div开始（隐藏） -->
    <div style="display: none;" id="TranceDiv">
        <form class="layui-form" action="" lay-filter="dataFrm1" id="dataFrm1">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="name" required  disabled lay-verify="required" placeholder="请输入用户名" value="${data.name}" autocomplete="off" class="layui-input">
                </div>
            </div>
        
            <!-- <div class="layui-form-item">
                <label class="layui-form-label">跟进时间：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="date" name="inputTime" required  lay-verify="required" placeholder="请输入跟进时间" autocomplete="off" class="layui-input">
                </div>
            </div> -->

            <div class="layui-form-item">
                <label class="layui-form-label">跟进内容：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="password" required  lay-verify="required" placeholder="跟进内容" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">跟进方式：</label>
                <div class="layui-input-block" style="width: 160px;">
                    <select name="city" lay-verify="" id="tranceMethod">
                        <option value="">请选择一个城市</option>
                        
                      </select>  
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">更进结果：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="age" required  lay-verify="required" placeholder="请输入跟进结果" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="age" required  lay-verify="required" placeholder="备注" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">跟进类型：</label>
                <div class="layui-input-block">
                    <input style="width: 250px" type="text" name="age" required  lay-verify="required" placeholder="跟进类型" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="doSubmit3">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 修改功能弹出层div结束 -->
    <!-- 主界面开始 -->
    <div class="box">
        <div class="layui-card">
            <div class="layui-card-header" ><h1 style="color: #1E9FFF;"><strong>潜在客户管理</strong></h1></div>
            <div class="" style="margin: 10px 10px 10px 10px;">
    
                <fieldset class="fieldset" style="border: 1px solid darkgray;">
                    <legend style="font-size: large;">搜索信息</legend>
                    <div style="margin: 10px 10px 10px 10px">
                        <form class="layui-form layui-form-pane" action="">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">关键字</label>
                                    <div class="layui-input-inline">
                                        <input type="text" name="keyword" autocomplete="off" class="layui-input" placeholder="请输入姓名/电话">
                                    </div>
                                </div>
                                <div class="layui-inline">
                                        <label class="layui-form-label">状态</label>
                                        <div class="layui-input-block">
                                            <select lay-verify="required">
                                                <option value="1" selected>潜在客户</option>
                                                <option value="2">正式客户</option>
                                            </select>
                                        </div>
                                </div>
    
                                <div class="layui-inline">
                                    <button type="submit" class="layui-btn layui-btn-primary" lay-submit="" lay-filter="data-search-btn"><i class="layui-icon"></i> 查 询</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </fieldset>
            </div>
    
            <div class="layui-card-body">
                <table class="layui-table" id="table" lay-filter="test"></table>
            </div>
            <div id="pageDemo" style="text-align: center"></div>
        </div>
    </div>
    <!-- 主界面结束 -->
    
    <!-- 头部工具栏 -->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
            <button class="layui-btn layui-btn-sm" lay-event="insert">添加客户</button>
        </div>
    </script>

    <!-- 行工具栏 -->
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="trace">跟进</a>
        <a class="layui-btn layui-btn-xs layui-btn-warm" lay-event="move">移交</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">修改状态（暂定del）</a>
    </script>
    
    <script>
        //声明所使用的layUI组件（全局）
        layui.use(["table","form","laypage"],function(){
            var table = layui.table;
            var form = layui.form;
            var $ =layui.jquery;
            var laypage = layui.laypage;

            $.ajaxSetup({
                // 发送cookie
                xhrFields: {
                    withCredentials: true
                }
            });
    
            //前端接口（URL）接受后端数据进行数据表格的渲染(查询)
            var tableIns = table.render({
                elem:'#table',
                toolbar: '#toolbarDemo',
                url:'http://localhost:8888/customer/queryPage',
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": 0, //解析接口状态
                        "msg": res.msg, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.data.data //解析数据列表
                    };
                },

                //设置表头
                cols:[[
                    {field:'select',type:"checkbox"},
                    {field:'zizeng', title:'序号', width:80,type: 'numbers'},
                    {field:'name',title:'姓名',width:150},
                    {field:'age',title:'年龄'},
                    {field:'gender',title:'性别',templet:function(g){
                        // console.log(r)   
                        return formatState2(g.gender)}},
                    {field:'tel',title:'电话'},
                    {field:'qq',title:'qq'},
                    {field:'job',title:'职业'},
                    {field:'source',title:'来源'},
                    {field:'seller',title:'营销人员'},
                    {field:'status',title:'状态',templet:function(d){
                        // console.log(r)   
                        return formatState1(d.status)}},
                    {field:'操作',title:'操作',toolbar:'#barDemo',fixed:'right',width:350}
                ]],
             
                //分页
                page:{
                    layout:['prev','page','next','count']//,'limit','skip'
                    ,page:function(res){
                        return res.page
                    } //获取currentPage
    
                    // ,limit:function(res){
                    //     return res.limit
                    // }//获取pageSize
                    ,groups:10 //最多显示几个跳页按钮
                    ,first:true //显示首页
                    ,last:true  //显示尾页
                }
    
            });
            function formatState1(status){
                if(status == 1){
                    return"<div style='color:red'>管理员</div>";
                }else if(status ==2){
                    return"<div style='color:green'>员工</div>";
                }
            }function formatState2(status){
                if(status == 1){
                    return"<div style='color:red'>男</div>";
                }else if(status ==2){
                    return"<div style='color:green'>女</div>";
                }
            }
            
            //头部工具栏事件监听
            table.on('toolbar(test)',function (obj){
                //打印事件名
                console.log(obj);
                var checkStatus = table.checkStatus(obj.config.id);
                console.log(checkStatus);
    
                // 获取事件名
                var eventName = obj.event;
                switch (eventName){
                    case "getCheckData":
                        var arr = checkStatus.data;
                        layer.alert(JSON.stringify(arr));
                        break;
    
                    case "getCheckLength":
                        var arr = checkStatus.data;
                        layer.msg("选中了"+arr.length+"条数据！");
                        break;
    
                    case "isAll":
                        var flag = checkStatus.isAll;
                        var str = flag ? '全选' : '未全选' ;
                        layer.msg(str);
                        break;

                    //若点击“新增”按钮，进入该事件，调用新增方法openAdd();
                    case "insert":
                        openAdd();
    
                    default:
                        break;
    
                };
            });
    
            //行工具栏事件监听
            table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
                if(layEvent === 'del'){ //监听删除事件
                    console.log(data);
                    console.log(data.id);
                    layer.confirm('真的删除行么', function(index){
                        
                //点击删除发送请求
                $.ajax({
                    url:'http://localhost:8888/customer/delete', //删除数据接口
                    type: 'POST',
                    data: data.id,
                    success:function(res){
                        alert("删除成功");

                    //重新加载数据表格
                    tableIns.reload();
                    },
                    error:function(){
                        alert("删除失败");
                    },
                })

                    // obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    //向服务端发送删除指令
                    });
                } else if(layEvent === 'edit'){ //点击修改进入该事件，调用修改方法
                    openUpdate(data);
                }else if(layEvent === 'trace'){ //点击修改进入该事件，调用修改方法
                    console.log("sdfasefasdfasdf： "+data.id);
                    //点击跟进发送请求
                    $.ajax({
                        url:'http://localhost:8888/customer/tranceOne', //删除数据接口
                        type: 'POST',
                        data: {id: data.id},
                        success(res){
                            console.log(res.data)
                            var arr = res.data.info
                            var select= document.getElementById('tranceMethod');
                            arr.forEach(function (param) {

                                console.log("正在执行forEach:"+param.id)
                                var option = document.createElement("option");
                                option.setAttribute("value", param.id);
                                option.innerText = param.title;
                                select.appendChild(option)
                              })
                           
                            openTrance(res.data) 
                        }
                    })
                }else if(layEvent === 'transfer'){ //点击修改进入该事件，调用修改方法
                open(data);
                }
                
                //TODO (移交、跟进等接口)
            });
    
            var url;
            var mainIndex;
    
            //新增方法（函数）
            function  openAdd(){
                mainIndex=layer.open({
                    type:1,
                    title:'新增',
                    content:$("#saveDiv"),
                    area:['800px','400px'],
                    success:function (){
                        $("#dataFrm")[0].reset();
                        url="/http://localhost:8888/customer/add";
                    }
                });
            }
            //修改方法（函数）
            function openUpdate(data){
                console.log(data);
                mainIndex=layer.open({
                    type:1,
                    title:'编辑',
                    content:$("#UpdateDiv"),
                    area:['800px','600px'],
                    success:function (index){
                        form.val("dataFrm",data);
                        url="/http://localhost:8888/customer/update";
                    }
                })
            }
            //更进方法（函数）
            function openTrance(data){
                mainIndex=layer.open({
                    type:1,
                    title:'跟进',
                    content:$("#TranceDiv"),
                    area:['800px','600px'],
                    success:function (index){
                        form.val("dataFrm1",data);
                        url="/index.jsp";
                    }
                })
            }
            //移交方法（函数）
            function openFollow_Up(data){
                mainIndex=layer.open({
                    type:1,
                    title:'编辑',
                    content:$("#UpdateDiv"),
                    area:['800px','600px'],
                    success:function (index){
                        form.val("dataFrm",data);
                        url="/index.jsp";
                    }
                })
            }
            //模糊查询表单监听提交
            form.on('submit(data-search-btn)', function (data) {
                var result = JSON.stringify(data.field);
                layer.alert(result, {
                    title: '最终的搜索信息'
                });
    
                //执行搜索重载
                table.reload('table', {
                    page: {
                        curr: 1
                    }
                    , where: {
                        searchParams: result
                    }
                }, 'data');
    
                return false;
            });
    
            // 新增表单监听提交
            form.on('submit(doSubmit1)', function(obj){
                //序列化/提交表单
                var params = $("#dataFrom").serialize();
                var url="http://localhost:8888/customer/add";
                //打印获取到的数据
                alert(params);
                var index = layer.msg("数据提交中，请稍后",{
                    icon:16,
                    time:false,
                    shade:0.8
                }); 

                $.post(url,obj.field,function (result){
                    //判断是否成功
                    if(result.code == 200){
                        //成功
                        layer.msg("操作成功",{icon:6})
                        layer.close(index);
                        layer.closeAll("iframe");
                        parent.localtion.reload();
                    }else{
                        layer.msg(result.msg,{icon:5});
                    }
                })
                // 关闭弹出层
                    layer.close(mainIndex);
                
                    //刷新表格
                    tableIns.reload();
            });
            
    
            form.on('submit(doSubmit2)', function(obj){
                //序列化/提交表单
                // var params = $("#dataFrm").serialize();
                // alert(params);
                console.log(obj);
                var index = layer.load(0, {shade: false}); //0代表加载的风格，支持0-2
                url="http://localhost:8888/customer/update";
                var data = $("[name='id']").val()
                $.post(url,obj.field,function (result){
                    // console.log("fangwangenc");
                    //判断是否成功
                    if(result.code == 200){
                        //成功
                        layer.msg("操作成功",{icon:6})
                        layer.close(index);
                        layer.closeAll("iframe");
                        parent.localtion.reload();
                    }else{
                        layer.msg(result.msg,{icon:5});
                    }
                    
                    //关闭弹出层
                    // layer.close(mainIndex);
    
                    //刷新表格
                    // tableIns.reload();
                })
            });

            // 新增表单监听提交
            form.on('submit(doSubmit3)', function(obj){
                //序列化/提交表单
                var params = $("#dataFrom").serialize();
                var url="http://localhost:8888/customer/tranceOne";
                //打印获取到的数据
                alert(params);
                var index = layer.msg("数据提交中，请稍后",{
                    icon:16,
                    time:false,
                    shade:0.8
                }); 

                $.post(url,obj.field,function (result){
                    //判断是否成功
                    if(result.code == 200){
                        //成功
                        layer.msg("操作成功",{icon:6})
                        layer.close(index);
                        layer.closeAll("iframe");
                        parent.localtion.reload();
                    }else{
                        layer.msg(result.msg,{icon:5});
                    }
                })
                // 关闭弹出层
                    layer.close(mainIndex);
    
                    //刷新表格
                    tableIns.reload();
            });
        });
    
    </script>
    </body>
</html>